<template>
    <a-tooltip :content="props.name"
               background-color="rgba(0,0,0,0.6)"
               :content-style="{padding:'0.05rem .1rem'}">
        <icon-fullscreen v-if="!fullscreen" @click="handleController" />
        <icon-fullscreen-exit v-else @click="handleController" />
    </a-tooltip>
</template>

<script setup>

    import { useBoolean } from 'vue-hooks-plus'
    const [fullscreen, { setTrue, setFalse }] = useBoolean(false);

    const emit = defineEmits(['callback']);

    const props = defineProps({
        name: {
            type: String,
            default:()=>'',
            required: true
        },
        options: {
            type: Object,
            default:()=>new Object(),
            required: true
        },
        index: {
            type: Number,
            default:()=>0,
            required: true
        },
    })

    const handleController=()=>{
        const { urlEncoded , instance } = props.options
        const id = urlEncoded[props.index]
        const element = document.getElementById(id).parentNode
        if(!fullscreen.value){
            element.requestFullscreen()
            setTrue()
        }else{
            document.exitFullscreen()
            setFalse()
        }

        setTimeout(()=>{
            const dp = instance[props.index]
            emit('callback', dp);
        },100)
    }

</script>

<style scoped></style>